<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>个人简介-王锦鑫的个人简介</title>
    <link href="img/7.jpg" rel="shortcut icon">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
    <div class="logo">
        <h1 style="margin-top: 13px;font-size: 2rem">个人简介</h1>
    </div>
    <div class="daohang">
        <ul>
            <li class="active">
                <a href="">
                    <span>首页</span>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="">
                    <span>我的简历</span>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="">
                    <span>作品展示</span>
                    <i></i>
                </a>
            </li>
            <li>
                <a href="">
                    <span>博客</span>
                    <i></i>
                </a>
            </li>
        </ul>
    </div>
</nav>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" id="id">
           <div class="sy">
               <img src="img/1.jpg" alt="" class="img">
               <p style="border-bottom: 1px solid">人生就是一道坡，只有不懈攀登，才能到达顶坡，实现自我的最高价值！</p>
               <h1 class="xm">王锦鑫</h1>
                <i>20岁</i>
               <p>前端开发工程师</p>
               <p>手机：没有</p>
               <p>QQ：没有</p>
           </div>
        </div>
        <div class="swiper-slide" id="id1">
            <div class="ey">
                <div class="gy">
                    <p><b>关于我</b></p>
                    <span>-ABOUT ME-</span>
                </div>
                <div class="introduce">
                    <div class="row">
                        <div class="col-md-3">
                            <img src="img/2.png" alt="">
                            <p class="quan"></p>
                            <div class="text">
                                <span class="xl">学历</span>
                                <p class="heng"></p>
                                <span class="ll">大专</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <img src="img/3.png" alt="">
                            <p class="quan"></p>
                            <div class="text">
                            <span class="xl">年龄</span>
                            <p class="heng"></p>
                            <span class="nl">20</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <img src="img/4.png" alt="">
                            <p class="quan"></p>
                            <div class="text">
                                <span class="xl">籍贯</span>
                                <p class="heng"></p>
                                <span class="xie">沧州 青县</span>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <img src="img/5.png" alt="">
                            <p class="quan"></p>
                            <div class="text">
                                <span class="xl">目前</span>
                                <p class="heng"></p>
                                <span class="jy">未就业</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="js">
                    <p>我是一个热爱计算机，喜欢钻研计算机知识的人，钻研Web技术</p>
                    <p>非常喜欢Web前端技术，想成一个前端工程师</p>
                    <p>希望能成长为一个高级前端工程师</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide" id="id2">
            <div class="container">
            <div class="gy">
                <p><b>专业技能</b></p>
                <span>-SKILL-</span>
            </div>
         <div class="kl">
             <p style="text-align: center;font-size: 12px;color: black;margin-top: 34px;">IT技术的学习需要持之以恒，对知识的认识深度与广度都很重要。对于前端而言更是如此，近几年前端框架层出不穷，前端技术已经从单纯的静态页面开发慢慢转变成mvc、mvvc等架构型开发，前端工程师正在渐渐向全栈工程师转变，前端开发的重中之重依然是javascript脚本的理解与应用，目前正在不断深入学习javascript知识。</p>
         </div>
                <div class="mb">
                    <div class="row">
                        <div class="col-md-3">
                            <img src="img/6.png" alt="">
                            <p>HTML</p>
                            <i class="fas fa-caret-up"></i>
                        </div>
                        <div class="col-md-3">
                            <img src="img/7.png" alt="">
                            <p>CSS</p>
                            <i class="fas fa-caret-up"></i>
                        </div>
                        <div class="col-md-3">
                            <img src="img/8.png" alt="">
                            <p>JS</p>
                            <i class="fas fa-caret-up"></i>
                        </div>
                        <div class="col-md-3">
                            <img src="img/9.png" alt="">
                            <p>JSON</p>
                            <i class="fas fa-caret-up"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide" id="id3">
            <div class="container">
                <div class="gy">
                    <p><b>专业知识</b></p>
                    <span>-KNOWLEDGEZ-</span>
                </div>
                <div class="level">
                    <ul>
                        <li>
                        <div class="skill-label">
                                <span class="label">HTML</span>
                                <div class="progress">
                                   <span style="background:rgb(128, 0, 128);width:95%;border-radius: 6px;">95%</span>
                                </div>
                        </div>
                        <div class="skill-sumary lll">
                            <p>深刻理解web标准，熟悉html5新标签语意，能合理利用语意标签布局页面；</p>
                        </div>
                        </li>
                        <li>
                            <div class="skill-label">
                                <span class="label">CSS</span>
                                <div class="progress">
                                    <span style="background:blue;width:90%;border-radius: 6px;">90%</span>
                                </div>
                            </div>
                            <div class="skill-sumary lll">
                                <p>熟悉css3新特性属性及相关用法，有一定开发经验；了解css预编译语言less/sass；</p>
                            </div>
                        </li>
                        <li>
                            <div class="skill-label">
                                <span class="label">JavaScript</span>
                                <div class="progress">
                                    <span style="background:rgb(139, 69, 19);width:70%;border-radius: 6px;">70%</span>
                                </div>
                            </div>
                            <div class="skill-sumary">
                                <p>熟悉JavaScript编程语言</p>
                            </div>
                        </li>
                        <li>
                            <div class="skill-label">
                                <span class="label">Jqurey</span>
                                <div class="progress">
                                    <span style="background:rgb(255, 69, 0);width:30%;border-radius: 6px;">30%</span>
                                </div>
                            </div>
                            <div class="skill-sumary">
                                <p>熟练掌握jqurey开发页面特效，提高页面开发效率；</p>
                            </div>
                        </li>
                        <li>
                            <div class="skill-label">
                                <span class="label">Zepto</span>
                                <div class="progress">
                                    <span style="background:green;width:10%;border-radius: 6px;">10%</span>
                                </div>
                            </div>
                            <div class="skill-sumary lll">
                                <p>正在快速熟练掌握zepto开发页面特效，提高页面开发效率(主要应用在移动端)；</p>
                            </div>
                        </li>
                        <li>
                            <div class="skill-label">
                                <span class="label">vue.js</span>
                                <div class="progress">
                                    <span style="background:rgb(255, 69, 0);width:40%;border-radius: 6px;">40%</span>
                                </div>
                            </div>
                            <div class="skill-sumary">
                                <p>正在学习(暂无开发经验)</p>
                            </div>
                        </li>
                        <li>
                            <div class="skill-label">
                                <span class="label">Ajax</span>
                                <div class="progress">
                                    <span style="background:rgb(139, 0, 0);width:50%;border-radius: 6px;">50%</span>
                                </div>
                            </div>
                            <div class="skill-sumary lll">
                                <p>熟悉JavaScript、Ajax、Jsonp、DOM等前端技术，熟练应用ajax技术与后端数据进行交互处理；</p>
                            </div>
                        </li>
                        <li>
                            <div class="skill-label">
                                <span class="label">Bootstrap</span>
                                <div class="progress">
                                    <span style="background:chartreuse;width:80%;border-radius: 6px;">80%</span>
                                </div>
                            </div>
                            <div class="skill-sumary">
                                <p>熟练掌握bootstrap框架及源码的使用方法；</p>
                            </div>
                        </li>
                        <li>
                            <div class="skill-label">
                                <span class="label">Swiper</span>
                                <div class="progress">
                                    <span style="background:#d3cb43;width:70%;border-radius: 6px;">70%</span>
                                </div>
                            </div>
                            <div class="skill-sumary lll">
                                <p>熟练使用Swiper框架开发页面动画效果，有一定开发经验；</p>
                            </div>
                        </li>
                        <li>
                            <div class="skill-label">
                                <span class="label">php</span>
                                <div class="progress">
                                    <span style="background:#706e45;width:20%;border-radius: 6px;">20%</span>
                                </div>
                            </div>
                            <div class="skill-sumary">
                                <p>熟悉简单的PHP交互</p>
                            </div>
                        </li>
                    </ul>
                </div>
                </div>
        </div>
        <div class="swiper-slide" id="id4">
            <div class="container">
                <div class="gy">
                    <p><b style="color: #2C8DFB">我的项目</b></p>
                    <span style="color: #2C8DFB">-My Project-</span>
                </div>
                <div class="Project">
                    <div class="row">
                        <div class="col-md-4">
                            <a href="http://sxggm.gitee.io/independent_travel/me.html"><img src="img/14.png" alt=""></a>
                        </div>
                        <div class="col-md-4">
                            <a href="http://sxggm.gitee.io/wanba/"><img src="img/13.png" alt=""></a>
                        </div>
                        <div class="col-md-4">
                            <a href="http://sxggm.gitee.io/tianyamingyuedao/"><img src="img/12.png" alt=""></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide" id="id5">
            <canvas id="canvas" width="1400" height="600">
            </canvas>
            <div class="gy">
                <p><b style="color: greenyellow">最后分享</b></p>
                <span style="color: red">-Last share-</span>
                <div class="ghj">
                    灵感 代码 梦想 未来
                </div>
                <div class="jkl">
                    <span class="t1">INSPIRATION</span>
                    <span class="t2">CODE</span>
                    <span class="t3">DREAM</span>
                    <span class="t4">FUTURE</span>
                </div>
                <div class="lmj">
                    <p>互联网是个奇妙的行业，</p>
                    <p>身为前端工程师，更贴近用户，这种体验非常美妙</p>
                    <p>我热爱互联网，更热爱互联网前端技术，</p>
                    <p>三人行，必有我师，</p>
                    <p>让我们在互联网的浪潮里一起不断成长！</p>
                    <p></p>
                </div>
            </div>
        <footer>
            <p style="color: white">谢谢大家观看,感谢大家的欣赏</p>
        </footer>
        </div>
    </div>
    <div class="swiper-pagination"></div>
    </div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
<script src="script.js">

</script>
<script>
    //Based on https://www.youtube.com/watch?v=3CycKKJiwis

    var canvas = document.getElementById("canvas");

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Initialize the GL context
    var gl = canvas.getContext('webgl');
    if(!gl){
        console.error("Unable to initialize WebGL.");
    }

    //Time step
    var dt = 0.03;
    //Time
    var time = 0.0;

    //************** Shader sources **************

    var vertexSource = `
attribute vec2 position;
void main() {
  gl_Position = vec4(position, 0.0, 1.0);
}
`;

    var fragmentSource = `
precision highp float;

uniform float width;
uniform float height;
vec2 resolution = vec2(width, height);

uniform float time;

float random(vec2 par){
   return fract(sin(dot(par.xy,vec2(12.9898,78.233))) * 43758.5453);
}

vec2 random2(vec2 par){
	float rand = random(par);
	return vec2(rand, random(par+rand));
}

void main(){
  // Normalized pixel coordinates (from 0 to 1)
  vec2 uv = gl_FragCoord.xy/resolution.xy;

  //The ratio of the width and height of the screen
  float widthHeightRatio = resolution.x/resolution.y;

  float t = time * 0.01;
  float dist = 0.0;
  const float layers = 16.0;
  float scale = 32.0;
  float depth;
  float phase;
  float rotationAngle = time * -0.01;

  vec2 offset;
  vec2 local_uv;
  vec2 index;
  vec2 pos;
  vec2 seed;
  vec2 centre = vec2(0.5, 0.5);

  mat2 rotation = mat2(cos(rotationAngle), -sin(rotationAngle),
                       sin(rotationAngle),  cos(rotationAngle));

	for(float i = 0.0; i < layers; i++){
    depth = fract(i/layers + t);

    //Move centre in a circle depending on the depth of the layer
    centre.x = 0.5 + 0.1 * cos(t) * depth;
    centre.y = 0.5 + 0.1 * sin(t) * depth;

    //Get uv from the fragment coordinates, rotation and depth
    uv = centre-gl_FragCoord.xy/resolution.xy;
   	uv.y /= widthHeightRatio;
    uv *= rotation;
   	uv *= mix(scale, 0.0, depth);

    //The local cell
    index = floor(uv);

    //Local cell seed;
    seed = 20.0 * i + index;

    //The local cell coordinates
    local_uv = fract(i + uv) - 0.5;

    //Get a random position for the local cell
    pos = 0.8 * (random2(seed) - 0.5);

   	//Get a random phase
   	phase = 128.0 * random(seed);

   	//Get distance to the generated point, add fading to distant points
   	//Add the distance to the sum
   	dist += pow(abs(1.0-length(local_uv-pos)), 50.0 + 20.0 * sin(phase + 3.0 * time)) * min(1.0, depth*2.0);
 	}

	gl_FragColor = vec4(vec3(dist),1.0);
}
`;

    //************** Utility functions **************

    window.addEventListener( 'resize', onWindowResize, false );

    function onWindowResize(){
        canvas.width  = window.innerWidth;
        canvas.height = window.innerHeight;
        gl.viewport(0, 0, canvas.width, canvas.height);
        gl.uniform1f(widthHandle, window.innerWidth);
        gl.uniform1f(heightHandle, window.innerHeight);
    }

    //Compile shader and combine with source
    function compileShader(shaderSource, shaderType){
        var shader = gl.createShader(shaderType);
        gl.shaderSource(shader, shaderSource);
        gl.compileShader(shader);
        if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
            throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
        }
        return shader;
    }

    //From https://codepen.io/jlfwong/pen/GqmroZ
    //Utility to complain loudly if we fail to find the attribute/uniform
    function getAttribLocation(program, name) {
        var attributeLocation = gl.getAttribLocation(program, name);
        if (attributeLocation === -1) {
            throw 'Cannot find attribute ' + name + '.';
        }
        return attributeLocation;
    }

    function getUniformLocation(program, name) {
        var attributeLocation = gl.getUniformLocation(program, name);
        if (attributeLocation === -1) {
            throw 'Cannot find uniform ' + name + '.';
        }
        return attributeLocation;
    }

    //************** Create shaders **************

    //Create vertex and fragment shaders
    var vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
    var fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);

    //Create shader programs
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    gl.useProgram(program);

    //Set up rectangle covering entire canvas
    var vertexData = new Float32Array([
        -1.0,  1.0, 	// top left
        -1.0, -1.0, 	// bottom left
        1.0,  1.0, 	// top right
        1.0, -1.0, 	// bottom right
    ]);

    //Create vertex buffer
    var vertexDataBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);

    // Layout of our data in the vertex buffer
    var positionHandle = getAttribLocation(program, 'position');

    gl.enableVertexAttribArray(positionHandle);
    gl.vertexAttribPointer(positionHandle,
            2, 				// position is a vec2 (2 values per component)
            gl.FLOAT, // each component is a float
            false, 		// don't normalize values
            2 * 4, 		// two 4 byte float components per vertex (32 bit float is 4 bytes)
            0 				// how many bytes inside the buffer to start from
    );

    //Set uniform handle
    var timeHandle = getUniformLocation(program, 'time');
    var widthHandle = getUniformLocation(program, 'width');
    var heightHandle = getUniformLocation(program, 'height');

    gl.uniform1f(widthHandle, window.innerWidth);
    gl.uniform1f(heightHandle, window.innerHeight);

    function draw(){
        //Update time
        time += dt;

        //Send uniforms to program
        gl.uniform1f(timeHandle, time);
        //Draw a triangle strip connecting vertices 0-4
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

        requestAnimationFrame(draw);
    }

    draw();
</script>
</body>
</html>